---
import '../styles/global.css';

interface Props {
  title: string;
  description?: string;
}

const { title, description = "Feast is an end-to-end open source feature store for machine learning. It allows teams to define, manage, discover, and serve features." } = Astro.props;
---

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{title}</title>
    <meta name="description" content={description}>
    
    <!-- SEO Meta Tags -->
    <meta name="robots" content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1">
    
    <!-- Open Graph Meta Tags -->
    <meta property="og:locale" content="en_US">
    <meta property="og:type" content="website">
    <meta property="og:title" content={title}>
    <meta property="og:description" content={description}>
    <meta property="og:url" content="https://feast.dev/">
    <meta property="og:site_name" content="Feast">
    <meta property="og:image" content="https://feast.dev/wp-content/uploads/2023/01/feast-og@2x.png">
    <meta property="og:image:width" content="1201">
    <meta property="og:image:height" content="630">
    <meta property="og:image:type" content="image/png">
    
    <!-- Twitter Card Meta Tags -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:image" content="https://feast.dev/wp-content/uploads/2023/01/feast-og@2x.png">

    <!-- Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;700&family=IBM+Plex+Sans:wght@400&display=swap" rel="stylesheet">
    
    <!-- Favicon -->
    <link rel="icon" href="/images/feast_icon-black.png" sizes="32x32">
    <link rel="icon" href="/images/feast_icon-black.png" sizes="192x192">
    <link rel="apple-touch-icon" href="/images/feast_icon-black.png">
  </head>
  <body class="bg-white">
    <slot name="header" />
    <main>
      <slot />
    </main>
    <slot name="footer" />
  </body>
</html> 